//index.js
//获取应用实例
const app = getApp()
const Pager = require('components/aotoo/core')
const mkDropdown = require('../../components/modules/dropdown')
// inner_templates always-embed="{{props['always-embed']||true}}"
const comForm = (idx = 1) => {
  return {
    '@form': {
      $$id: 'comForm'+idx,
      data: [
        {
          title: {
            title: [
              {title: '房间'+idx},
              {title: '(至少填1人)', itemClass: 'size-tag color-placeholder no-lh mt10'}
            ],
            itemClass: 'color-info wid-156-r'
          },
          input: [
            {
              id: 'xing'+idx,
              title: [{title: '姓', itemClass: 'ss-i-block'}, {title: '(拼音/英文)', itemClass: 'color-info size-sm ss-i-block'}],
              type: 'text',
              placeholder: '例:XIAO',
              bindblur: 'bindblur?id=xing',
              itemClass: 'aaa'
            },
            {
              id: 'ming'+idx,
              title: [{title: '名', itemClass: 'ss-i-block'}, {title: '(拼音/英文)', itemClass: 'color-info size-sm ss-i-block'}],
              type: 'text',
              placeholder: '例:Ming'
            },
          ],
          inputClass: 'abc',
          itemClass: 'line-ab-b content-column'
        },
        {
          title: {title: '', itemClass: 'wid-156-r'},
          input: [
            {
              id: 'xing2'+idx,
              title: [{title: '姓', itemClass: 'ss-i-block'}, {title: '(拼音/英文)', itemClass: 'color-info size-sm ss-i-block'}],
              type: 'text',
              placeholder: '例:XIAO'
            },
            {
              id: 'ming2'+idx,
              title: [{title: '名', itemClass: 'ss-i-block'}, {title: '(拼音/英文)', itemClass: 'color-info size-sm ss-i-block'}],
              type: 'text',
              placeholder: '例:Ming'
            },
          ],
          itemClass: 'content-column'
        }
      ],
      listClass: 'input-container-default input-item-lr'
    }
  }
}

Pager({
  data: {
    demo: Pager.item({
      body: [{title: '入住信息', itemClass: 'title-primary'}, {title: '登记入住人姓名需与证件一致', itemClass: 'size-sm color-title'}],
      '@form': {
        $$id: 'formId',
        data: [
          {
            title: {title: '房间数', itemClass: 'wid-156-r'},
            input: [
              {
                id: 'mkDrop',
                type: 'span',
                value: {
                  '@item': {
                    title: [
                      {
                        $$id: 'spanInst_1',
                        title: '1'
                      },
                      {
                        title: '间'
                      }
                    ],
                    aim: 'showDrop?type=0',
                    titleClass: 'flex-row',
                    itemClass: 'flex-row-between-center icon-after-toggle click'
                  },
                  '@list': mkDropdown({
                    $$id: 'mkDropdown',
                    data: [
                      {title: '1间', value: '1', 'hover-class': 'active'},
                      {title: '2间', value: '2', 'hover-class': 'active'},
                      {title: '3间', value: '3', 'hover-class': 'active'},
                      {title: '4间', value: '4', 'hover-class': 'active'},
                      {title: '5间', value: '5', 'hover-class': 'active'},
                      {title: '6间', value: '6', 'hover-class': 'active'},
                      {title: '7间', value: '7', 'hover-class': 'active'},
                      {title: '8间', value: '8', 'hover-class': 'active'},
                    ],
                    listClass: 'input-item-dropdown-options d-none',
                    tap(item, index){
                      const that = this   //此this为mkDropdown
                      const val = parseInt(item.title)
                      const drop = that.activePage.getElementsById('mkDropdown')
                      const $abc = that.activePage.getElementsById('abc')
                      drop.addClass('d-none')
                      that.activePage.getElementsById('spanInst_1').update({title: val})
                      wx.showLoading({title: '加载中'})

                      let length  = $abc.getData().data.filter(item => {
                        if (item.itemClass.indexOf('item-fail') < 0) {return item }
                      }).length
                      
                      if (length < val) {
                        for(let i = length; i < val; i++) {
                          $abc.update({[`$list.data[${parseInt(i)}]`]: comForm(parseInt(i + 1))}, function() {
                            if (i + 1 === val) {
                              wx.hideLoading()
                            }
                          })
                        }
                      }
                      else {
                        for(let i = (length - 1); i >= val; i--) {
                          $abc.update({[`$list.data[${parseInt(i)}]`]: {itemClass: 'item-fail'}}, function (params) {
                            if (i - 1 === val) {
                              wx.hideLoading()
                            }
                          })
                          
                        }
                      }
                    }
                  })
                },
                // inputClass: 'flex-1',
              }
            ],
          },
          {
            input: [{
              id: 'xxx',
              type: 'span',
              value: {
                '@list': {
                  $$id: 'abc',
                  data: [comForm()],
                  listClass: 'fw-normal list-item-mb'
                }
              }
            }]
          },
          {
            title: {title: '联系手机', itemClass: 'wid-156-r'},
            input: [
              {title: {title: '+86', itemClass: 'mr-primary'}, type: 'number', id: 'phonoe', inputClass: '' },
            ]
          },
          {
            title: {title: '预计到店', itemClass: 'wid-156-r'},
            input: [
              {
                id: 'mkDrop2',
                type: 'span',
                value: {
                  '@item': {
                    $$id: 'spanInst_2',
                    title: [
                      {title: '15:00'},
                      {title: '（房间整晚保留）', itemClass: 'color-info'}
                    ],
                    aim: 'showDrop?type=1',
                    titleClass: 'flex-row',
                    itemClass: 'flex-row-between-center icon-after-toggle click'
                  },
                  '@list': mkDropdown({
                    $$id: 'mkDrop2down',
                    data: [
                      {title: '15:00', value: '1', 'hover-class': 'active'},
                      {title: '16:00', value: '2', 'hover-class': 'active'},
                      {title: '17:00', value: '3', 'hover-class': 'active'},
                      {title: '18:00', value: '4', 'hover-class': 'active'},
                      {title: '19:00', value: '5', 'hover-class': 'active'},
                      {title: '次日00:00', value: '6', 'hover-class': 'active'},
                    ],
                    listClass: 'input-item-dropdown-options row-3 d-none',
                    tap(item, index){
                      const that = this   //此this为mkDropdown
                      const val = item.title
                      const drop = that.activePage.getElementsById('mkDrop2down')
                      drop.addClass('d-none')
                      that.activePage.getElementsById('spanInst_2').update({[`title[0].title`]: val})
                    }
                  })
                },
                // inputClass: 'flex-1',
              }
            ],
            itemClass: 'items-start'
          },
        ],
        listClass: 'input-container-default form-special input-item-lr border'
      },
      dot: [{title: '提交', itemClass: 'ss-button btn-default mt-default', tap: 'onSubmit'}],
      itemClass: 'ss-card m-default',
    })
  },
  $formInst: null,
  $appendInst: null,
  
  showDrop: function (e, param, inst) {
    const type = param.type
    let dpInst = null
    if (type == 0) {
      dpInst = this.getElementsById('mkDropdown')
    }
    else {
      dpInst = this.getElementsById('mkDrop2down')
    }
    inst.toggleClass('active')
    dpInst.toggleClass('d-none')
  },
  bindblur(e, params, inst) {
    const id = params.id
    inst.removeWarn(id)
  },
  onSubmit(e, params, inst) {
    const sss = this.getElementsById('comForm1')
    if (!sss.value('xing1').value) {
      sss.addWarn('xing1', {title:"请输入拼音/英文", itemClass: 'eeror'})
    }
    if (sss.value('xing21').value) {
      sss.removeWarn('xing1')
      sss.addWarn('xing21', {title:"请输入拼音/英文", itemClass: 'eeror'})
    }
    console.log('sss', sss, this.$formInst);
    
  },
  onShow: function () {},
  onReady: function () {
    this.$formInst = this.getElementsById('formId')
    this.$appendInst = this.getElementsById('abc')
  },
  onLoad: function () {},
})
